<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>
			工单管理
		</view>
		<view style="height: 140upx;"></view>
		<view class="line-select" v-if='lineList.length>1'>
			<view class="line-select-title">
				<text>选择线路</text>
				<view>
					<text>全选</text>
					<u-switch class="line-select-switch" v-model="lineAllChecked" @change="lineAllCheckedChange"
						:size='40'></u-switch>
				</view>
			</view>
			<view class="line-circle">
				<text v-for="(item,index) in lineList" :key="index"
					:style="{ width:width+'px', background:item.selected?item.bgcolor:''}"
					:class="[item.selected ? 'active' : 'inactive']" @click="selectLine(item,'param')">
					{{item.name}}
				</text>
			</view>
		</view>

		<view class="list-area">
			<view class="list-area-item" @click="goList(1)">
				<u-image width="120rpx" height="120rpx" src="../../static/img/order.png" mode=""></u-image>
				<view class="list-item">
					<view>预备工单</view>
					<view>包含状态为待派单、待接单、准备中、进行中的工单</view>
				</view>
				<view class="list-tip">{{orderTotal.totalone}}</view>
			</view>

			<view class="list-area-item" @click="goList(2)">
				<u-image width="120rpx" height="120rpx" src="../../static/img/my_order.png" mode=""></u-image>
				<view class="list-item">
					<view>我的工单</view>
					<view>当前需要本人处理的工单</view>
				</view>
				<view class="list-tip">{{orderTotal.totaltwo}}</view>
			</view>
			<view class="list-area-item" @click="goList(3)">
				<u-image width="120rpx" height="120rpx" src="../../static/img/history_order.png" mode=""></u-image>
				<view class="list-item">
					<view>历史工单</view>
					<view>本人已处理完成的工单</view>
				</view>
				<view class="list-tip">{{orderTotal.totalthree}}</view>
			</view>
			<view class="list-area-item" @click="goList(4)">
				<u-image width="120rpx" height="120rpx" src="../../static/img/all_order.png" mode=""></u-image>
				<view class="list-item">
					<view>全部工单</view>
					<view>根据权限可查看的相关工单</view>
				</view>
				<view class="list-tip">{{orderTotal.totalfour}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		PMS_DICT_CONTROLLER,
		WORK_CONTROLLER
	} from "../../api/pms";
	export default {
		components: {},
		data() {
			return {
				lineAllChecked: false,
				lineList: [],
				width: 30,
				orderTotal: {
					totalone: "0",
					totaltwo: "0",
					totalthree: "0",
					totalfour: "0"
				},
				setTimeoutId: ""
			}
		},
		watch: {

		},
		onReady() {

		},
		computed: {
			...mapState([
				"userInfo"
			]),
		},
		async created() {
			await this.getLineList()
			await this.getTotal()
		},
		onBackPress(e) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		methods: {
			coumputedWidth() {
				const arr = this.lineList.map(item => {
					return item.name
				})
				let maxlength = this.findLargest(arr)
				this.width = maxlength.length * 16
				// lineList
				// findLargest
			},
			findLargest(arr = []) {
				if (!arr?.length) {
					return '';
				};
				let res = '';
				res = arr.reduce((acc, val) => {
					return acc.length >= val.length ? acc : val;
				});
				return res;
			},
			returnLine(param) {
				let num = ''
				param.match(/\d+/g) ? num = param.match(/\d+/g)?.join('') : num = '其'
				param.match(/\d+/g)?.join('')
				return num
			},
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			goList(id) {
				uni.navigateTo({
					url: "/pages/productCenter/list" + '?typeid=' + id
				});
			},
			lineAllCheckedChange(status) {
				if (status) {
					for (let i = 0; i < this.lineList.length; i++) {
						this.lineList[i].selected = true;
					}
				} else {
					for (let i = 0; i < this.lineList.length; i++) {
						this.lineList[i].selected = false;
					}
				}
				let lineIds = []
				for (let i = 0; i < this.lineList.length; i++) {
					if (this.lineList[i].selected) {
						lineIds.push(this.lineList[i].idK)
					}
				}
				this.$store.state.lineIdsSelected = lineIds;
				this.getTotal()
				this.$forceUpdate()
			},
			selectLine(selectedItem,params) {
				let lineIds = []
				clearTimeout(this.setTimeoutId)
				for (let i = 0; i < this.lineList.length; i++) {
					if (this.lineList[i].name == selectedItem.name) {
						this.lineList[i].selected = selectedItem.selected ? false : true;
					}
					if (this.lineList[i].selected) {
						lineIds.push(this.lineList[i].idK)
					}
				}
				this.$store.commit('lineIdsSelected', lineIds)
		
				if(params){
					this.setTimeoutId = setTimeout(() => {
						this.getTotal()
					
					}, 500)
				}
				this.$forceUpdate()
			},
			async getLineList() {
				await this.fetch('GET', this.$store.state.baseUrl + '/api/sys/line/findAll', {}, true).then((res) => {
					if (res.success && res.data && res.data.length != 0) {
						this.lineList = res.data.map(item => {
							return {
								...item,
								bgcolor: "#2979FF",
							}
						})
						let lineIds = this.$store.state.lineIdsSelected || []
						this.coumputedWidth()
						if (lineIds.length == this.lineList.length) {
							this.lineAllChecked = true
						}
						if (lineIds.length) {
							res.data.forEach(items => {
								lineIds.forEach(it => {
									if (it == items.idK) {
										this.selectLine(items);
									}
								})
							})
						} else if (this.$store.state.lineIdsSelectedStatus) {
							this.selectLine(res.data[0])
						}
					} else {
						console.error(res)
					}
				})
			},
			async getTotal() {
				await this.getTotalByID(1)
				await this.getTotalByID(3)
				await this.getTotalByID(4)
				await this.getCountMyOrder()
				// this.$forceUpdate()
			},

			async getTotalByID(typeID) {
				let params

				if (typeID == 1) {
					params = {
						woState: '待派单,进行中,准备中,待接单',
						pageNum: 1,
						pageSize: 20,
						woLine: this.$store.state.lineIdsSelected,
						userid: this.getUserId()
					};
				} else if (typeID == 3) {
					params = {
						woState: '已完成',
						pageNum: 1,
						pageSize: 20,
						woLine: this.$store.state.lineIdsSelected,
						userid: this.getUserId()
					};

				} else if (typeID == 4) {
					params = {
						woState: '',
						pageNum: 1,
						pageSize: 20,
						woLine: this.$store.state.lineIdsSelected
					};
				}

				await this.fetch('get', this.$store.state.baseUrl + WORK_CONTROLLER.GET_ALL_WORKORDER_LIST, params,
						false)
					.then((res) => {
						if (res.success && res.data) {
							console.log('res.data.totalElements', res.data.totalElements)
							if (typeID == 1) {
								this.orderTotal.totalone = res.data.totalElements;
							}
							if (typeID == 3) {
								this.orderTotal.totalthree = res.data.totalElements;
							}
							if (typeID == 4) {
								this.orderTotal.totalfour = res.data.totalElements;
							}
						}
					})
			},
			async getCountMyOrder() {
				let params = {
					pageNum: 1,
					pageSize: 999999,
					woLine: this.$store.state.lineIdsSelected,
				}
				await this.fetch('get', this.$store.state.baseUrl + WORK_CONTROLLER.GET_COUNT_MYORDER, params, false)
					.then((res) => {
						if (res.success) {
							this.orderTotal.totaltwo = res.data;
						}
					})
			}
		}
	}
</script>

<style scoped lang="less">
	.app-title {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;

		.history-icon {
			float: right;

			/deep/.u-icon__icon {
				position: relative;
				top: 8upx !important;
			}
		}
	}

	.line-select {
		background-color: white;
		margin: 12rpx;
		padding: 20rpx 15rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;

		.line-select-title {
			view:nth-of-type(1) {
				float: right;

				text {
					padding-right: 20rpx;
				}

				.line-select-switch {
					position: relative;
					top: -3rpx;
				}
			}

			text:nth-of-type(1) {
				font-weight: bold;
			}
		}

		.line-circle {
			overflow: hidden;
			margin: 10rpx 8rpx;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			text {
				align-self: center;
				margin: 12rpx;
				// float: left;

				line-height: 54rpx;
				text-align: center;
				border-radius: 10rpx;
				min-width: 54rpx;
				min-height: 54rpx;

				span {
					height: 100%;
				}
			}

			.active {
				background-color: #6f56e8;
				color: white;
			}

			.inactive {
				// background-color: #faf9fe;
				background-color: #c8c8c8;
				color: black;
			}
		}
	}

	.list-area {
		.list-area-item {
			background-color: white;
			padding: 15rpx;
			margin: 15rpx;
			// overflow: hidden;
			position: relative;
			display: flex;
			flex-direction: row;

			.list-tip {
				position: absolute;
				width: 80rpx;
				height: 50rpx;
				top: 25rpx;
				right: 20rpx;
				background-color: #037689;
				line-height: 50rpx;
				text-align: center;
				color: white;
				font-size: 24rpx;
				font-weight: 600;
			}

			.u-image {
				width: 110rpx;
				height: 140rpx;
				margin: 12rpx 20rpx;
			}

			.list-item {
				flex: 1;
				float: right;
				padding-top: 20rpx;

				view:nth-of-type(1) {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				view:nth-of-type(2) {
					color: #b6b6b6;
				}
			}
		}
	}
</style>